<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<!-- 头部 -->
		<!-- <u-navbar title="申请退票退款" :leftIconSize="36" :autoBack="true" bgColor="transparent" leftIconColor="#ffffff"
			:titleStyle="titleStyle"></u-navbar> -->
		<c-nav-bar1 title="申请退票退款"></c-nav-bar1>

		<!-- 	<image class="bg" src="https://i.ringzle.com/file/20231025/87b08695ad8e42418fd81a98b2f742fe.jpg" mode="">
		</image> -->
		<view class="bg"></view>
		<!-- 头部 -->
		<view class="box ship_hotel">
			<text class="sh_title">{{ item.scenicName }}</text>
			<view class="sh_date">
				游玩日期
				<text>{{ item.playDate }} {{ item.playWeek }}</text>
			</view>
		</view>
		<!-- 游客信息 -->
		<view class="box person_info">
			<view>
				<text class="title">游客信息</text>
			</view>
			<view v-for="(tourist, index) in touristList" :key="index" class="pi_item">
				<view class="pli_left_box">
					<view class="pii_left">
						<view class="piil_name">
							<text>{{ tourist.name }}</text>
							<!-- <view>{{ tourist.type == 1 ? '成人票' : '儿童票' }}{{ typeCfgSc[tourist.type] }} </view> -->
							<view>{{ typeCfgSc[tourist.type] }} </view>
							<view :class="tourist.status === 4 ? 'status_box' : ''">{{ statusType[tourist.status] }} </view>
						</view>
						<view class="piil_idcard">身份证 {{ tourist.idcard }}</view>
					</view>
					<view class="pii_right">￥{{ tourist.price }}</view>
				</view>
				<view class="pli_right_box">
					<template v-if="tourist.status === 1">
						<image src="https://fsy.shengsi.gov.cn/file/20240906/119a9318c011420ba8b7677bc12fbf00.png" mode="" v-if="!tourist.isSelect"
							@tap="selectPerson(tourist, index)">
						</image>
						<image src="https://i.ringzle.com/file/20240222/ef0d5ce39fd3422692a1be8feb08e45f.png" mode="" v-else
							@tap="selectPerson(tourist, index)"></image>
					</template>
					<template v-else>
						<view class="disabled_box"></view>
					</template>
				</view>
			</view>
		</view>
		<!-- <view class="kc_tip">扣除0.0%手续费,共计￥0.00</view> -->
		<!-- 退款原因 -->
		<view class="box refund">
			<text class="title">退款原因</text>
			<view class="r_item" v-for="(item, index) in refundReasons" :key="index">
				<text>{{ item.title }}</text>

				<image src="https://fsy.shengsi.gov.cn/file/20240906/119a9318c011420ba8b7677bc12fbf00.png" mode="" v-if="!item.isSelect" @tap="selectReason(item, index)">
				</image>
				<image src="https://i.ringzle.com/file/20240222/ef0d5ce39fd3422692a1be8feb08e45f.png" mode="" v-else
					@tap="selectReason(item, index)"></image>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="box order">
			<text class="title">订单信息</text>
			<view class="o_item">
				<text>订单编号</text>
				<text>{{ item.orderCode }}</text>
			</view>
			<view class="o_item">
				<text>下单时间</text>
				<text>{{ item.orderTime }}</text>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<view class="b_left">
				<view>预计退款：<span>￥</span><text>{{ price }}</text></view>
			</view>
			<view class="b_right">
				<view class="br_mx" @tap="detailsShow = true">
					<text>明细</text>
					<image src="@/static/my/icon_xjt.png"></image>
				</view>
				<view class="br_tk" @tap="toRefund">确认退票</view>
			</view>
		</view>
		<u-popup :show="detailsShow" @close="detailsShow = false">
			<view class="details">
				<view class="title">
					<text>费用明细</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="detailsShow = false"></image>
				</view>
				<view class="d_item">
					<text>订单金额</text>
					<text>￥{{ price }}</text>
				</view>
				<!-- <view class="d_item2" v-if="item.shipTotal>0">
					<text>船票</text>
					<text>￥{{item.shipPrice}}X{{item.shipTotal}}张</text>
				</view>
				<view class="d_item2">
					<text>酒店</text>
					<text>￥{{item.hotelOrderInfo.realityPay}}X1张</text>
				</view> -->
				<view class="d_item">
					<text>退款手续费</text>
				</view>
				<view class="d_item2">
					<text>扣除0.0%</text>
					<text>￥0.00</text>
				</view>
				<view class="d_item yjtk">
					<text>预计退款</text>
					<text class="red">￥{{ price }}</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="confrimShow" @close="confrimShow = false">
			<view class="details">
				<view class="title">
					<text>申请退票</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="confrimShow = false"></image>
				</view>
				<view class="c_alert">
					您确定要退票吗？确认申请退票将不可撤回，再次购买可能会因为无票，影响您的游玩行程！
				</view>
				<view class="c_money">
					<text>退款金额</text>
					<text>￥{{ price }}</text>
				</view>
				<view class="c_memo">退款预计1-7个工作日原路退回，请耐心等待</view>
				<view class="c_btns">
					<view @tap="confrimShow = false">我再想想</view>
					<view @tap="confirmApply">确定申请</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'refundTicket',
	data() {
		return {
			h: uni.getWindowInfo().windowHeight - 60,
			mt: uni.getSystemInfoSync().statusBarHeight + 44,
			titleStyle: {
				fontSize: '36rpx',
				fontWeight: "bold",
				color: "#FFFFFF"
			},
			item: null,
			week: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
			passengers: [],
			refundReasons: [{
				title: '购票错误',
				isSelect: false
			},
			{
				title: '行程有变',
				isSelect: false
			},
			],
			price: 0,
			detailsShow: false,
			confrimShow: false,
			refundReason: '',
			touristList: [],
			refundList: {
				touristIds: []
			},
			queryValue: {},
			selectList: [],
			typeCfgSc: {
				1: '成人票',
				2: '老人票',
				3: '儿童票',
				4: '半价票',
			},
			statusType: {
				4: "已退款",
				3: "退票中",
				"-1": "已取消",
				0: "待支付",
				1: "待使用",
				2: "已使用"
			}
		}
	},
	onLoad(option) {
		if (option.id) {
			this.getDetails(option.id);
		}
	},
	methods: {
		getDetails(id) {
			this.$api.get('/api/scenic/selectOrderDetails?orderCode=' + id).then(res => {
				if (res.data.code === 0) {
					this.item = res.data.data;
					this.item.playDate = new Date(this.item.playDate).Format('yyyy-MM-dd');
					this.item.playWeek = this.week[new Date(this.item.playDate).getDay()];
					this.item.ticketList.forEach(d => {
						this.touristList.push({
							name: d.realName,
							type: d.ticketType,
							idcard: d.idCode,
							price: d.orderRealityPay,
							isSelect: false,
							oid: d.oid,
							status: d.status
						})
					});
					// this.price = this.item.realityPay;
					// this.price += this.touristList.reduce((cur, pre) => cur + parseFloat(pre.price), 0);
					// this.item.shipPrice = this.item.isShipOrderListDTO.detailDTOList[0].realFee;
					// this.item.shipTotal = this.item.isShipOrderListDTO.detailDTOList.length;
				} else this.$showModal(res.data.msg)
			})
		},
		selectReason(item, index) {
			this.refundReason = item.title;
			this.refundReasons.forEach((d, i) => this.$set(this.refundReasons[i], 'isSelect', false));
			this.$set(this.refundReasons[index], 'isSelect', true);
		},
		selectPerson(item, index) {
			this.touristList.forEach((d, i) => { if (i === index) { d.isSelect = !d.isSelect } })
			this.selectList = this.touristList.filter((d, i) => { return d.isSelect })
			this.price = 0
			this.selectList.forEach((i) => {
				if (i.isSelect) this.price += i.price
			})
		},
		//点击确认退款弹出提示
		toRefund() {
			if (this.selectList.length === 0) {
				return uni.showModal({
					title: '温馨提示',
					content: '请选择需要退款的游客',
					showCancel: false,
					confirmText: '我知道了',
					confirmColor: '#007A69'
				})
			}
			if (!this.refundReason) {
				return uni.showModal({
					title: '温馨提示',
					content: '请选择退款原因后,再提交申请退款',
					showCancel: false,
					confirmText: '我知道了',
					confirmColor: '#007A69'
				})
			}

			this.confrimShow = true;
		},
		//确定申请
		//确定申请
		confirmApply() {
			const id = []
			// this.item.ticketList.forEach(i => {
			// 	id.push(i.oid)
			// })
			this.selectList.forEach(i => {
				id.push(i.oid)
			})
			this.refundList.orderCode = this.item.orderCode
			this.refundList.refundReason = this.refundReason
			this.refundList.touristIds = id
			// console.log('this.refundList', this.refundList);
			this.$api.post('/api/scenic/applyRefund', this.refundList).then(res => {
				if (res.data.code === 0) {
					this.confrimShow = false;
					this.queryValue.outRefundNo = res.data.data.id
					this.queryValue.outTradeNo = res.data.data.orderCode
					this.queryValue.refundFee = res.data.data.refundPrice
					this.queryValue.totalFee = res.data.data.realityPay
					this.$api.post('/order/icbc/refund', this.queryValue).then(result => {
						if (result.data.code === 0) {
							this.$showToast('退款成功');
							setTimeout(() => {
								uni.redirectTo({
									url: '/pagesMy/order/index?name=景点门票&type=0&typeIndex=2'
								})
							}, 2000)
						} else {
							this.$showToast(result.data.msg);
							setTimeout(() => {
								uni.redirectTo({
									url: '/pagesMy/order/index?name=景点门票&type=0&typeIndex=2'
								})
							}, 2000)
						}
					}).catch(err => {
						console.log('err', err);
					})
				} else this.$showModal(res.data.msg)
			})
		}
	}
}
</script>

<style scoped lang="less">
.page {
	background: #F5F8FA;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding-bottom: 140rpx;

	// .bg {
	// 	width: 100%;
	// 	height: 702rpx;
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	z-index: 0;
	// }
	.bg {
		height: 700rpx;
		position: fixed;
		// top: 44px;
		// z-index: 1;
		width: 100%;
		background-image: linear-gradient(to bottom, #007A69, #007A69, #F5F8FA);
	}

	.box {
		width: calc(100% - 48rpx);
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 40rpx 24rpx;
		position: relative;
		box-sizing: border-box;
	}

	.ship_hotel {
		margin-top: 46rpx;

		.sh_title {
			font-size: 36rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
			line-height: 36rpx;
		}

		.sh_date {
			margin-top: 28rpx;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #808080;
			padding-bottom: 10rpx;

			text {
				color: #FF7D01;
				margin-left: 30rpx;
			}
		}
	}

	.person_info {
		margin-top: 20rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
		}

		.pi_item {
			border-top: 1rpx solid rgba(112, 112, 112, .1);
			padding-top: 28rpx;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.pli_left_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
			}

			.pli_right_box {
				display: flex;
				margin-left: 10px;

				.disabled_box {
					width: 19px;
					height: 19px;
					border-radius: 50%;
					background-color: #f5f7fa;
					border: 1.5px solid #dcdfe6;
					box-sizing: border-box;
					// border-color: #dcdfe6;
					cursor: not-allowed;
				}
			}

			.pii_left {
				.piil_name {
					display: flex;
					align-items: center;

					text {
						font-size: 30rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}

					view {
						width: 87rpx;
						height: 36rpx;
						background: #F5F8FA;
						border-radius: 8rpx;
						line-height: 36rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #94A9C8;
						margin-left: 15rpx;
					}

					.status_box{
						// background: none;
						color: #E6A23C;
						background: rgb(250, 236, 216)
					}
				}

				.piil_idcard {
					margin-top: 16rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.pii_right {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF4141;
			}
		}

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.kc_tip {
		width: calc(100% - 60rpx);
		padding: 19rpx 30rpx 23rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF4141;
		text-indent: 30rpx;
	}

	.refund {
		margin-top: 20rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
		}

		.r_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 31rpx 0;
			border-bottom: 1rpx solid #EFEFEF;

			text {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			image {
				width: 36rpx;
				height: 36rpx;
			}

			&:last-child {
				padding-bottom: 0;
				border: none;
			}
		}
	}

	.order {
		margin-top: 20rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
		}

		.o_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 40rpx;

			text {
				&:first-child {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				&:last-child {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}

	.bottom {
		width: calc(100% - 60rpx);
		padding: 0 30rpx;
		height: 112rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.b_left {
			height: 40rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;

			span {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF4141;
			}

			text {
				font-size: 48rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #FF4141;
			}
		}

		.b_right {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.br_mx {
				display: flex;
				align-items: center;

				text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 8rpx;
				}
			}

			.br_tk {
				background-color: #007A69;
				width: 220rpx;
				height: 80rpx;
				// background: linear-gradient(90deg, #FF7D43 0%, #FEAC2C 100%);

				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-left: 24rpx;


			}
		}
	}

	.details {
		padding: 40rpx 30rpx 64rpx;

		.title {
			position: relative;
			text-align: center;

			text {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 10rpx;
				top: 50%;
				margin-top: -18rpx;
			}
		}

		.d_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 44rpx;

			text {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;

				&.red {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #FF4141;
				}
			}

			&.yjtk {
				margin-top: 94rpx;
			}
		}

		.d_item2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24rpx;

			text {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}
		}

		.c_alert {
			margin-top: 64rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}

		.c_money {
			margin-top: 40rpx;
			width: 100%;
			height: 100rpx;
			background: #F5F8FA;
			border-radius: 5rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;

			text {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;

				&:last-child {
					font-weight: bold;
					color: #FF4141;
				}
			}
		}

		.c_memo {
			margin-top: 24rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.c_btns {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 144rpx;

			&>view {
				width: calc(50% - 15rpx);
				height: 88rpx;
				border-radius: 16rpx;
				border: 1rpx solid #AAAAAA;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;

				&:last-child {
					background: #007A69;
					color: #FFFFFF;
				}
			}
		}
	}
}
</style>